<template>
  <el-dialog
      v-model="editProductVisible"
      title="修改工作信息"
      width="30%"
      center
      @close="closeEditDialog(false)"
  >
    <el-form ref="validateForm" :model="workForm" :rules="houseRules" label-width="120px" class="demo-dynamic" status-icon>
      <el-form-item label="工作名称" prop="house_name">
        <el-input v-model="workForm.work_name" placeholder="Enter house_name...">

        </el-input>
      </el-form-item>
      <el-form-item label="人数" prop="amount">
        <el-input v-model="workForm.amount" placeholder="Enter address...">

        </el-input>
      </el-form-item>
      <el-form-item label="金钱 " prop="money">
        <el-input v-model="workForm.money" placeholder="Enter family_id...">

        </el-input>
      </el-form-item>
      <el-form-item label="描述 " prop="describe">
        <el-input v-model="workForm.describe" placeholder="Enter region_id...">

        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="() => {
          closeEditDialog(false);
        }">取消</el-button>
        <el-button type="primary" @click="submitEdit"
        >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script >
import {reactive, toRefs, ref, onMounted} from "vue";
import axios from "axios";
import {ElMessageBox} from "element-plus";
//根据房屋编号，查询要编辑的数据
function houseLoadEditData(state){
  axios.get("/api/work?ID="+state.workID).then((res) => {
    state.workForm = res.data.data.res
  })
}
//提交编辑
function houseEdit(state, validateForm, emit){
  const submitEdit = () => {
    validateForm.value.validate((vaild) => {
      if(vaild){
        const params={
          ID:state.workID,
          work_name:state.workForm.work_name,
          amount:parseInt(state.workForm.amount),
          money:parseInt(state.workForm.money),
          describe:state.workForm.describe,
          resource_type_id:parseInt(state.workForm.resource_type_id)
        };
        axios.put("/api/work", (params)).then((res) => {
          emit('onCloseDialog', false, res);
        })
      }
    })
  }
  return {submitEdit}
}
export default {
  name: "AddUser",
  props: {
    editProductVisible:Boolean,
    workID:Number
  },
  emits: ["onCloseDialog"],
  setup(props, {emit}) {
    const validateForm = ref();
    const state=reactive({
      editProductVisible:props.editProductVisible,
      workID:props.workID,
      workForm:{
        work_name:"",
        amount:0,
        money:0,
        describe:"",
        resource_type_id:2
      }
    });
    const houseRules = {
      work_name: [{required: true, message: 'Please input work_name', trigger: 'blur',}],
      describe: [{required: true, message: 'Please input describe', trigger: 'blur',}],
      amount: [{required: true, message: 'Please input amount', trigger: 'blur',}],
      money: [{required: true, message: 'Please input money', trigger: 'blur',}],
      resource_type_id: [{required: true, message: 'Please input resource_type_id', trigger: 'blur',}],
    }
    const closeEditDialog = (visible) => {
      emit('onCloseDialog', visible)
    }
    const handleClose = (done) => {
      ElMessageBox.confirm('Are you sure to close this dialog?')
          .then(() => {
            done()
          })
          .catch(() => {
            // catch error
          })
    }
    onMounted(() => {
      houseLoadEditData(state);
    })
    return {
      ...toRefs(state),
      handleClose,
      closeEditDialog,
      houseRules,
      validateForm,
      ...houseEdit(state, validateForm, emit)
    }
  }
}
</script>

<style scoped>

</style>